<template>
  <div>
    <div class="info">
      <div class="pic">
        <div class="hot"></div>
        <div class="time">更新时间：{{ upTime | formatTime }}</div>
      </div>
      <div class="list" v-for="(item, index) in list" :key="item.id" >
        <div class="code" :class="{ 'code-red': index < 3 }">
          {{ index > 8 ? index + 1 : "0" + (index + 1) }}
        </div>
        <div class="list-item" @click="selectItem(item)">
          <div class="left">
            <div class="subtitle">
              {{ item.name }} <span>{{ item.alia[0] }}</span>
            </div>
            <div class="author">
              <img src="@/assets/sq.png" alt="" />
              <span v-for="ele in item.ar" :key="ele.id" class="ele"
                >{{ ele.name }}
              </span>
              - {{ item.al.name }}
            </div>
          </div>
          <div class="right"><img src="@/assets/bofang.png" alt="" /></div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottommm">
          <span>查看完整榜单 ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      list: [],
      upTime: {},
    };
  },
  created() {
    this.getPlaylist();
  },
  methods: {
    getPlaylist() {
      this.$request("get", "/playlist/detail?id=24381616").then((res) => {
        console.log("热歌榜->", res);
        this.list = res.playlist.tracks;
        this.upTime = res.playlist.updateTime;
      });
    },
    selectItem(item) {
      const id = item.id;
      console.log(id);
      this.$router.push({path: `/song/${id}`})
    },
  },
  filters: {
    formatTime(val) {
      return moment(val).format("MM月DD日");
    },
  },
};
</script>

<style scoped>
.pic {
  background: url("@/assets/hot_music_bg_2x.jpg");
  background-size: 100%;
  height: 140px;
  position: relative;
}
.pic .time {
  position: absolute;
  bottom: 20px;
  color: white;
  font-size: 14px;
  left: 20px;
}
.list {
  width: 100%;
  display: flex;
}
.list-item {
  border-bottom: 1px solid #eee;
  padding-left: 10px;
  width: 800px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex: 1px;
  text-align: left;
}
.list .code {
  width: 2rem;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.list .code-red {
  color: rgb(196, 49, 51);
}
.left {
  width: 16rem;
}
.right {
  /* width: 4rem; */
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.right img {
  width: 30px;
  float: right;
  margin: 5px 10px;
}
.subtitle {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.author {
  margin-top: 4px;
  font-size: 12px;
  color: #888;
  text-overflow: ellipsis;
}
.author .span {
  margin-left: 5px;
  text-overflow: ellipsis;
}
.author img {
  margin-left: 3px;
  width: 15px;
}
.bottom {
  height: 1.5rem;
  width: 80%;
  margin: auto;
}
.bottommm {
  vertical-align: middle;
  width: 100px;
  margin: auto;
  font-size: 0.5rem;
  margin-top: 0.8rem;
  color: rgb(153, 153, 153);
}
</style>